<template>
  <el-card class="box-card">
    <div class="title-container" style="margin-bottom: 10px;">
      <el-button type="success" @click="goBack">
        返回</el-button>
      <el-button type="primary" @click="addInstantiate">
        新增</el-button>
    </div>
    <div class="col over-auto">
      <common-table :tableHeight="'500'" v-loading="tableLoading" show-index show-check-box :columns="columns"
        :list="list">
      </common-table>
      <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
        @pagination="pagination" />
    </div>
  </el-card>
</template>

<script>
import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"

import { queryWorkNewList, openOrCloseWorkNewOne, deleteWorkNewOne } from "@/api/workflow/index"
export default {
  components: {
    CommonTable
  },
  props: {
    deviceCode: String,
  },
  data () {
    return {
      searchModel: {
        userName: ''
      },
      columns: [
        {
          title: "实例化编码",
          prop: "newCode",
          align: "center",
        },
        {
          title: "实例化名称",
          prop: "newName",
          align: "center",
        },
        {
          title: "应用状态",
          prop: "status",
          align: "center",
          render: (h, params) => {
            return h('div', [h("el-tag", {
              props: {
                type: params.row.status == 'open' ? "success" : "danger",
              },
            }, params.row.status == 'open' ? '启用' : '停用')])
          }
        },
        {
          title: "创建时间",
          prop: "createTime",
          align: "center",
        },
        {
          title: "操作",
          width: 300,
          align: "center",
          render: (h, params) => {
            return h('div', [h("el-button", {
              props: {
                type: "success",
                size: "mini",
              },
              on: {
                click: () => {
                  this.handleDetail(params.row)
                }
              }
            }, '查看'),
            h("el-button", {
              props: {
                type: "primary",
                size: "mini",
              },
              on: {
                click: () => {
                  this.handleUpdata(params.row)
                }
              }
            }, '修改'),
            h("el-button", {
              props: {
                type: "success",
                size: "mini",
              },
              on: {
                click: () => {
                  this.handleOpenClose(params.row)
                }
              }
            }, '启停用'),
            h("el-button", {
              props: {
                type: "warning",
                size: "mini",
              },
              on: {
                click: () => {
                  this.open(params.row)
                }
              }
            }, '删除')])
          }
        },
      ],
      list: [],
      tableLoading: false,
      dialogVisible: false,
      page: {
        pageSize: 10,
        pageIndex: 1,
      },
      count: 0,
      warnCode: '',
      row: {}
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.row = this.$route.query
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getTableList()
  },
  // 存放方法事件 - 会在数据变化时被调用
  methods: {
    addInstantiate () {
      this.$router.push({
        path: "/instantiate/instantiateIndex",
        query: {
          type: 2,
          status: 0,//新增
          workModelCode: this.row.workModelCode,
          projectCode: this.row.projectCode
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    },
    pagination (pageItem) {
      this.page.pageIndex = pageItem.page
      this.page.pageSize = pageItem.limit
      this.getTableList()
    },
    handleDetail (val) {
      this.$router.push({
        path: "/instantiate/instantiateIndex",
        query: {
          type: 2,
          status: 2,//查看
          workModelCode: this.row.workModelCode,
          projectCode: this.row.projectCode,
          newCode: val.newCode
        }
      })
    },
    handleUpdata (val) {
      this.$router.push({
        path: "/instantiate/instantiateIndex",
        query: {
          type: 2,
          status: 1,//修改
          workModelCode: this.row.workModelCode,
          projectCode: this.row.projectCode,
          newCode: val.newCode
        }
      })
    },
    closeDialog () {
      this.dialogVisible = false
    },
    async getTableList () {
      this.tableLoading = true
      const { status, success, object, message } = await queryWorkNewList({ workModelCode: this.row.workModelCode, ...this.page })
      if (status == 200) {

        this.count = object.count
        this.list = object.data
      }
      this.tableLoading = false
    },
    async handleOpenClose (row) {

      const { status, success, object, message } = await openOrCloseWorkNewOne({
        newCode: row.newCode,
        type: row.status == 'open' ? 'close' : 'open'
      })
      if (status == 200) {
        this.getTableList()
        this.$message({
          type: "success",
          message: object,
        })
      }
    },
    open (row) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(row)
      }).catch(() => {

      })
    },
    async handleDelete (row) {
      const { status, success, object, message } = await deleteWorkNewOne({ newCode: row.newCode })
      if (status == 200) {
        this.getTableList()
        this.$message({
          type: "success",
          message: message,
        })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.box-card {
  margin: 10px;
}

.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
